<html lang="en">

<head>
	<meta charset="utf-8" />
	<title>轨迹播放</title>
	<style type="text/css">
		body,
		html {
			width: 100%;
			height: 100%;
			margin: 0;
			font-family: "微软雅黑";
		}

		#map_canvas {
			width: 100%;
			height: 90%;
		}

		#result {
			width: 100%
		}
	</style>
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=1XjLLEhZhQNUzd93EjU5nOGQ"></script>

	<script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js" <script
		type="text/javascript" src="js/GeoUtils.js"></script>
	<script type="text/javascript" src="js/FileSaver.js"></script>

</head>

<body>
	<div id="map_canvas"></div>
	<div id="result"></div>
	<button id="run" style="height:40px;width:60px;color: red;font-size: small">播放</button>
	<button id="stop" style="height:40px;width:60px;color: red;font-size: small">停止</button>
	<button id="pause" style="height:40px;width:60px;color: red;font-size: small">暂停</button>
	<!-- <button id="hide" style="height:40px;width:60px;">隐藏信息窗口</button>
	<button id="show" style="height:40px;width:60px;">展示信息窗口</button> -->
	<script>
		var marker;
		var map = new BMap.Map('map_canvas');
		map.enableScrollWheelZoom();
		map.centerAndZoom();
		var lushu;

		$.get('mapdata.js', function (rs) {

					var geoCoords = JSON.parse(rs);

					var arrPois = [];

					for (var i = 0; i < geoCoords.length; i++) {
						var point = new BMap.Point(geoCoords[i].geoCoord[0], geoCoords[i].geoCoord[1]);
						arrPois.push(point);
					}

					// map.addOverlay(new BMap.Polyline(arrPois, {strokeColor: '#111'})); //不画线
					map.setViewport(arrPois);
					marker = new BMap.Marker(arrPois[0], {
						icon: new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52,
							26), {
								anchor: new BMap.Size(27, 13)
							})
					});
					var label = new BMap.Label("粤A30780", {
						offset: new BMap.Size(0, -30)
					});
					label.setStyle({
						border: "1px solid rgb(204, 204, 204)",
						color: "rgb(0, 0, 0)",
						borderRadius: "10px",
						padding: "5px",
						background: "rgb(255, 255, 255)",
					});
					marker.setLabel(label);

					map.setMapType(BMAP_EARTH_MAP);
					map.addOverlay(marker);
					BMapLib.LuShu.prototype._move = function (initPos, targetPos, effect) {
						var pointsArr = [initPos, targetPos]; //点数组
						var me = this,
							//当前的帧数
							currentCount = 0,
							//步长，米/秒
							timer = 10,
							step = this._opts.speed / (1000 / timer),
							//初始坐标
							init_pos = this._projection.lngLatToPoint(initPos),
							//获取结束点的(x,y)坐标
							target_pos = this._projection.lngLatToPoint(targetPos),
							//总的步长
							count = Math.round(me._getDistance(init_pos, target_pos) / step);

						//显示折线 syj201607191107
						this._map.addOverlay(new BMap.Polyline(pointsArr, {
							strokeColor: "#18a45b",
							strokeWeight: 6,
							strokeOpacity: 0.5
						})); // 画线 
						//如果小于1直接移动到下一点
						if (count < 1) {
							me._moveNext(++me.i);
							return;
						}
						me._intervalFlag = setInterval(function () {
							//两点之间当前帧数大于总帧数的时候，则说明已经完成移动
							if (currentCount >= count) {
								clearInterval(me._intervalFlag);
								//移动的点已经超过总的长度
								if (me.i > me._path.length) {
									return;
								}
								//运行下一个点
								me._moveNext(++me.i);
							} else {
								currentCount++;
								var x = effect(init_pos.x, target_pos.x, currentCount, count),
									y = effect(init_pos.y, target_pos.y, currentCount, count),
									pos = me._projection.pointToLngLat(new BMap.Pixel(x, y));
								//设置marker
								if (currentCount == 1) {
									var proPos = null;
									if (me.i - 1 >= 0) {
										proPos = me._path[me.i - 1];
									}
									if (me._opts.enableRotation == true) {
										me.setRotation(proPos, initPos, targetPos);
									}
									if (me._opts.autoView) {
										if (!me._map.getBounds().containsPoint(pos)) {
											me._map.setCenter(pos);
										}
									}
								}
								//正在移动
								me._marker.setPosition(pos);
								//设置自定义overlay的位置
								me._setInfoWin(pos);
							}
						}, timer);
					};
					lushu = new BMapLib.LuShu(map, arrPois, {
						defaultContent: "粤A30780", 
						autoView: true, //是否开启自动视野调整，如果开启那么路书在运动过程中会根据视野自动调整
						icon: new BMap.Icon('http://developer.baidu.com/map/jsdemo/img/car.png', new BMap.Size(52,
							26), {
								anchor: new BMap.Size(27, 13)
							}),
						speed: 4500,
						enableRotation: true, //是否设置marker随着道路的走向进行旋转
						landmarkPois: [{
							lng: 116.306954,
							lat: 40.05718,
							html: '加油站',
							pauseTime: 2
						}]

					});

					marker.addEventListener("click", function () {
						marker.enableMassClear(); //设置后可以隐藏改点的覆盖物
						marker.hide();
						lushu.start();
					});

					//绑定事件
					$("run").onclick = function () {
						if (lushu.runStatus === 2) {
							return ;
						}
						marker.enableMassClear(); //设置后可以隐藏改点的覆盖物
						if (lushu.runStatus === 1) {
							map.clearOverlays();
						}
						
						marker.hide();
						lushu.start();
						lushu.runStatus = 2;
					}
					$("stop").onclick = function () {
						lushu.stop();
						lushu.runStatus = 1;
					}
					$("pause").onclick = function () {
						lushu.pause();
						lushu.runStatus = 0;
					}
					// $("hide").onclick = function () {
					// 	lushu.hideInfoWindow();
					// }
					// $("show").onclick = function () {
					// 	lushu.showInfoWindow();
					// }

					function $(element) {
						return document.getElementById(element);
					}
				});
	</script>
</body>

</html>

